<template>
	<view class="backStyle">
		<CustomNavBarVue title="工作台" @back="handleBack" />
		<view class="homeStyle">
			<view class="headerSyle"></view>
			<view class="viewStyle">
				<view style="margin-bottom: 30rpx;font-size: 26rpx;color: white;">
					下午好！<br />
					2025年9月22日，星期三<br />
				</view>
				<view class="cardBox">
					<view class="cardItem" @click="clickCard(item)" v-for="(item,index) in cardData" :key="index">
						<div>
							<view>
								<image class="logo" src="/static/更多.png"></image>
							</view>
							<text>{{item.title}}</text>
						</div>
					</view>
				</view>
				<view class="carouselBox">
					<view class="marquee-container">
						<swiper class="marquee-swiper" :duration="800" :autoplay="true" :interval="3000"
							:circular="true" :vertical="true" :display-multiple-items="1">
							<swiper-item v-for="(item, index) in messages" :key="index">
								<view class="marquee-item">
									<text class="message-text">
										{{ item }}
									</text>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<navigator url="/pages/test/test" hover-class="navigator-hover">
					<button type="default">测试</button>
				</navigator>
				<view class="messageBox">
					<view>消息提醒</view>
					<view class="messageView">
						<view class="messageItem" v-for="(item, index) in 7" :key="index">
							<view class="messageHeaderItem">
								<view>
									客户经理
								</view>
								<view>
									2025-9-22&nbsp;&nbsp;&nbsp;16:51
								</view>
							</view>
							<view class="messageViewItem">
								<text class="messageView-text">第一条重要通知消息请问去123123123123问问请问而且我而且我而</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import CustomNavBarVue from '../../components/customNavBar.vue';
	const token = uni.getStorageSync('wxwork_token');
	const code = uni.getStorageSync('wxwork_code');
	const cardData = ref([{
		title: '客户管理'
	}, {
		title: '网格管理'
	}, {
		title: '我的任务'
	}, {
		title: '数据分析'
	}, {
		title: '活动管理'
	}, {
		title: '学习园地'
	}])
	const messages = ref(["第一条重要通知消息请问去问问请问而且我而且我而且我",
		"第二条紧急通知消息",
		"第三条温馨提示消息"
	])
	const handleBack = () => {
		if (getCurrentPages().length > 1) {
			uni.navigateBack()
		} else {
			// uni.navigateTo({
			// 	url:'/pages/login/login'
			// })
		}
		console.log(getCurrentPages());
	}
	const clickCard = (item) => {
		uni.showToast({
			title: item.title, // 提示内容（必填）
			icon: "none", // 图标：success/error/loading/none（默认success）
			duration: 1000, // 显示时长（ms，默认1500）
			position: "top" // 位置：top/middle/bottom（默认middle）
		});
	}
</script>

<style lang="less">
	.homeStyle {
		position: relative;
		height: 85vh;
		// background-color: red;

	}

	.headerSyle {
		background-color: #063e7d;
		height: 15vh;
	}

	.viewStyle {
		/* position: absolute; */
		position: relative;
		padding: 0 30rpx;
		top: -220rpx;
		color: black;

		// height: 100vh;
		// 横向消息轮播
		.carouselBox {
			margin: 30rpx 0;

		}

		// 消息提醒样式
		.messageBox {
			.messageView {
				height: 600rpx;
				margin-top: 30rpx;
				overflow-y: scroll;

				.messageItem {
					padding: 10rpx 30rpx;
					box-sizing: border-box;
					height: 80px;
					background-color: white;
					border-radius: 30rpx;
					margin-bottom: 30rpx;

					.messageHeaderItem {
						display: flex;
						font-size: 24rpx;
						justify-content: space-between;

					}

					.messageViewItem {
						width: 100%;
						// padding: 20rpx 30rpx;
					}
				}
			}
		}

		.cardBox {
			height: 390rpx;
			background-color: white;
			border-radius: 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.cardItem {
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				height: 50%;
				width: 30%;
				color: black;
				font-size: 26rpx;
				cursor: pointer;

			}
		}
	}

	.logo {
		height: 110rpx;
		width: 110rpx;
		// margin-top: 200rpx;
		// margin-left: auto;
		// margin-right: auto;
		// margin-bottom: 50rpx;
	}

	.marquee-container {

		border-radius: 15rpx;
		width: 100%;
		height: 40px;
		background-color: #e8e800;
	}

	.marquee-swiper {
		height: 100%;
	}

	.marquee-item {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;

		box-sizing: border-box;


	}

	.message-text {
		padding: 0 10rpx;
		font-size: 28rpx;
		color: #333;
		/* 单行文本溢出显示省略号 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		// width: 100%;
	}
</style>